import React from 'react';
import logo from './logo.svg';
import './App.css';

//条件渲染
class IfCom extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      num: 0
    }
  }
  
  putVal = (e) => {
    if (e.keyCode == 13) {
      this.setState({
        num: e.target.value
      })
    }
  }

  render() {
    return (
      <div>
        <input onKeyUp={this.putVal} type="text" placeholder="输入一个数,大于10显示，小于不显示"></input>
        <br />
        <span>
          {this.state.num > 10 ? this.state.num : ""}
        </span>
      </div>
    )
  }
}

//循环渲染
class ForeachCom extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [
        {
          id: 0,
          name: "李白",
          age: 150
        },
        {
          id: 1,
          name: "李白1",
          age: 151
        },
        {
          id: 2,
          name: "李白2",
          age: 152
        },
      ]
    }
  }


  render() {
    return (
      <button onClick={() => { this.props.putList(this.state.list) }}>
        传递数据给父级组件循环渲染
      </button>
    )
  }
}

//孙子组件
class GrandSonCom extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      list: "这是要传给父组件的数据",
      lists: null
    }
  };


  putList = (data) => {
    let arr = data.map(item => {
      return <li key={item.id}>{item.name}--{item.age}</li>
    })
    this.setState({
      lists: arr
    })
  }
  listPutData = () => {
    this.props.putList(this.state.lists)
  }

  render() {
    return (
      <div>
        <button onClick={this.putData}>
          发送数据给父组件
      </button>
        <br />
        <button onClick={this.listPutData}>
          这是测试事件传参的
      </button>
        <br />
        <span>
          这是条件渲染的位置
      </span>
        <br />
        <IfCom />
        <h3>这是接受子组件数据进行循环渲染的</h3>
        <ForeachCom putList={this.putList} />
        <ul>
          {this.state.lists}
        </ul>

      </div>

    )
  }

  handleData = (e) => {
    alert(e)
  }

  putData = () => {
    this.props.getGsonData(this.state.list)
  }
}


// 子组件
class ChildCom extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      list: "",

    }
  }
  render() {
    return (
      <div>
        children接受到的父组件的值是{this.props.isShow}
        <div></div>
        children接受孙子组件的传值{this.state.list}
        <div></div>
        <GrandSonCom getGsonData={this.getGsonData} />
      </div>
    )
  }

  getGsonData = (e) => {
    this.setState({
      list: e
    })
  }
}


// 父组件
function App() {
  let time = (new Date()).toLocaleTimeString()
  return (
    <div className="App">
      <h3>
        这个页面实现了
      </h3>
      <ul className="headerUl">
        <li>
          父子组件传值
          </li>
        <li>
          事件的传参
          </li>
        <li>
          条件渲染
          </li>
        <li>
          循环渲染
          </li>
      </ul>

      当前时间{time}
      <ChildCom isShow={"true"} />
    </div>
  );
}


export default App;
